import React, { useState } from 'react';
import './index.css';

function EventForm() {
  const [goals, setGoals] = useState('');
  const [assists, setAssists] = useState('');
  const [onLeave, setOnLeave] = useState(false);
  const [isNoShow, setIsNoShow] = useState(false);
  const [other, setOther] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setMessage(`事件已录入：进球数${goals}，助攻数${assists}，请假${onLeave ? '是' : '否'}，放鸽子${isNoShow ? '是' : '否'}，其他：${other}`);
    setGoals('');
    setAssists('');
    setOnLeave(false);
    setIsNoShow(false);
    setOther('');
  };

  return (
    <div className="login-container">
      <form className="login-form" onSubmit={handleSubmit}>
        <h2>数据录入</h2>
        <input
          type="number"
          min="0"
          placeholder="进球数"
          value={goals}
          onChange={e => setGoals(e.target.value.replace(/[^\d]/g, ''))}
        />
        <input
          type="number"
          min="0"
          placeholder="助攻数"
          value={assists}
          onChange={e => setAssists(e.target.value.replace(/[^\d]/g, ''))}
        />
        <label style={{marginBottom: 8}}>
          <input
            type="checkbox"
            checked={onLeave}
            onChange={e => setOnLeave(e.target.checked)}
            style={{marginRight: 8}}
          />
          是否请假
        </label>
        <label style={{marginBottom: 8}}>
          <input
            type="checkbox"
            checked={isNoShow}
            onChange={e => setIsNoShow(e.target.checked)}
            style={{marginRight: 8}}
          />
          是否放鸽子
        </label>
        <textarea
          placeholder="其他"
          value={other}
          onChange={e => setOther(e.target.value)}
          rows={3}
          style={{marginBottom: 16, padding: '8px 12px', borderRadius: 4, border: '1px solid #ccc', fontSize: 16}}
        />
        {message && <div className="error">{message}</div>}
        <button type="submit">录入</button>
      </form>
    </div>
  );
}

export default EventForm; 